<template>
    <div style="height:100%;width:100%;">
        <div style="height:100%;width:100%;" ref="MapView"></div>
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
        </div>
    </div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
// 配置图源信息
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]

export default {
    data() {
        return {
            value: '',
            SenceMode: '',
            MapOptions: [],
        }
    },
    mounted() {
        // 在没有配置显示模式时，默认以2D模式显示
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        // 获取当先的显示模式
        this.SenceMode = map.SenceMode;
    },
    methods: {
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        }
    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>
<style scoped>
.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
}
.ItemControl {
    color: #fff;
    padding: 5px;
    cursor: pointer;
}
</style>